<template>
    <tr-side-popup ref="popupRef" @show="popupShow" @hide="popupHide">
        <uni-forms v-if="shadow" label-position="top" label-width="100%">
            <uni-forms-item v-for="(item,index) in searchParams" :key="index" :name="item.prop"
                            :label="item.label">
                <input-item v-if="item.type === 'input'" v-bind="item" v-model="shadow[item.prop]"/>
                <number-item v-if="item.type === 'number'" v-bind="item" v-model="shadow[item.prop]"/>
                <check-box-item v-if="item.type === 'checkbox'" v-bind="item" v-model="shadow[item.prop]"/>
                <radio-item v-if="item.type === 'radio'" v-bind="item" v-model="shadow[item.prop]"/>
                <select-item v-if="item.type === 'select'" v-bind="item" v-model="shadow[item.prop]"/>
                <number-range v-if="item.type === 'numberRange'" v-bind="item" v-model="shadow[item.prop]"/>
                <date-time-range v-if="item.type === 'daterange'" v-model="shadow[item.prop]"/>
            </uni-forms-item>
        </uni-forms>
        <template #footer>
            <view class="btn-group">
                <view class="bang-button plain" @click="reset">
                    {{ $t('common.Reset') }}
                </view>
                <view class="bang-button" @click="search">
                    {{ $t('common.Search') }}
                </view>
            </view>
        </template>
    </tr-side-popup>
</template>
<script setup>
import checkBoxItem from './checkBox.vue'
import inputItem from './input.vue'
import radioItem from './radio.vue'
import selectItem from './select.vue'
import numberItem from './number.vue'
import numberRange from './numberRange.vue'
import dateTimeRange from './dateTimeRange.vue'

const props = defineProps({
    modelValue: {
        default: null
    },
    searchParams: {
        default: null
    },
    initValue: {
        default: null
    }
})

const form = useModel(props, 'modelValue')

const popupRef = ref()

const open = () => {
    popupRef.value.open()
}


const emits = defineEmits(['search'])

const search = async () => {
    popupRef.value.close()
}

const reset = async () => {
    props.searchParams.forEach(item => {
        if (props.initValue == null || props.initValue[item.prop] === undefined) {
            // 没有定义初始值则删除
            delete shadow.value[item.prop]
        } else {
            // 定义了就使用初始值
            shadow.value[item.prop] = qly.tool.deepCopy(props.initValue[item.prop])
        }
    })
    popupRef.value.close()
}

const shadow = ref()

const popupShow = () => {
    shadow.value = qly.tool.deepCopy(form.value)
}

const popupHide = async () => {
    if (JSON.stringify(shadow.value) === JSON.stringify(form.value)) {
        return
    }
    form.value = qly.tool.deepCopy(shadow.value)
    await nextTick()
    emits('search', form.value)
}

defineExpose({
    open
})
</script>
<style scoped>
.bang-button {
    flex: 1;
}

.bang-button:not(:first-child) {
    margin-left: 32rpx;
}

.btn-group {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:deep(.uni-forms-item__label) {
    font-family: PingFang-SC-Bold, PingFang-SC-Bold;
    font-weight: normal;
    font-size: 28rpx;
    color: #000000;
}
</style>
